@extends('admin.common.main')

@section('css')
        <link rel="stylesheet" href="{{env('STATIC_PATH')}}/css/user.css">
@endsection
@section('container')
<div class="contain" style="margin-top: 15px;">
    <div class="uc_contain">
        <ul class="uc_form">
            <li>
                <label class="tit" for="mobile">手机号</label>
                <div class="txt_area">
                    <input class="ipt" id="mobile" type="text" placeholder="请输入手机号" maxlength="11" autofocus=""><span class="tip tip_error">请输入手机号</span>
                </div>
            </li>
            <li>
                <label class="tit" for="code">验证码</label>
                <div class="txt_area">
                    <input class="ipt ipt_code" id="vcode" type="text" placeholder="请输入验证码" maxlength="5">
                    <img src="/captcha/login" alt="captcha" class="imgcode j_changeCode">
                </div>
            </li>
            <li>
                <label class="tit" for="code">短信验证码</label>
                <div class="txt_area">
                    <input class="ipt ipt_code ipt_disable" id="code" type="text" placeholder="请输入短信验证码" maxlength="6" disabled>
                    <a id="getCode" class="btn btn_disable btn_code">获取验证码</a>
                </div>
            </li>
            <li>
                <label class="tit" for="password">新密码</label>
                <div class="txt_area">
                    <input class="ipt ipt_disable" id="password" type="password" placeholder="请输入新密码" disabled>
                </div>
            </li>
            <li>
                <label class="tit" for="confirm_password">确认新密码</label>
                <div class="txt_area">
                    <input class="ipt ipt_disable" id="confirm_password" type="password" placeholder="请确认新密码" disabled>
                </div>
            </li>
            <li>
                <div class="txt_area">
                    <a id="submit" class="btn btn_disable" disabled>确 定</a>
                </div>
            </li>
        </ul>
    </div>
</div>
@endsection
@section('script')
<script>
    (function ($) {
        $(function () {
            //刷新验证码
            $(".j_changeCode").on("click", function () {
                var $t = $(this);
                $t.attr("src", "/captcha/login?" + new Date().getTime());
            });
            //手机号验证
            $("#mobile").on("blur", function () {
                var $ipt = $(this);
                var val = $ipt.val();
                if (!val) {
                    showMsg($ipt, "error", "请输入手机号");
                } else if (!isPhone(val)) {
                    //格式不正确
                    showMsg($ipt, "error", "请输入正确的11位手机号");
                }
            }).on("keyup", function () {
                var $ipt = $(this);
                var val = $ipt.val();
                var can = false;
                if (val && isPhone(val)) {
                    showMsg($ipt, "success");
                    var code = $("#vcode").val();
                    if (code && code.length === 4) {
                        can = true;
                    }
                }

                var $btn = $("#getCode");
                if ($btn.html().indexOf("s") === -1) {
                    toggleDisable($btn, "btn_disable", can);
                }
            });

            //图形验证码
            $("#vcode").on("blur", function () {
                var $ipt = $(this);
                var val = $ipt.val();
                if (!val) {
                    showMsg($(".j_changeCode"), "error", "请输入验证码");
                }
            }).on("keyup", function () {
                var $ipt = $(this);
                var val = $ipt.val();
                var can = false;
                if (val && val.length === 4) {
                    showMsg($(".j_changeCode"), "hide");
                    var mobile = $("#mobile").val();
                    if (mobile && isPhone(mobile)) {
                        can = true;
                    }
                }

                var $btn = $("#getCode");
                if ($btn.html().indexOf("s") === -1) {
                    toggleDisable($btn, "btn_disable", can);
                }
            });

            //获取验证码
            var globalCountNow = 59;
            $("#getCode").on("click", function () {
                var $t = $(this);
                if($t.attr("class").indexOf("disable") === -1) {
                    var $code = $("#code");
                    var $phone = $("#mobile");
                    var phone = $phone.val();
                    var code = $("#vcode").val();
                    toggleDisable($code, "ipt_disable", true);
                    $.ajax({
                        url: "/phone_code",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            phone: phone,
                            img_code: code,
                            type: 2
                        },
                        type: "POST",
                        dataType: "json",
                        success: function (data) {
                            var result = data["result"];
                            var msg = data["msg"];
                            if (result < 4) {
                                toggleDisable($phone, "ipt_disable", false);
                            }
                            if (result === 0) {
                                $t.html("已发送 （<span>60</span>）");
                                toggleDisable($t, "btn_disable", false);
                                globalCountDown = setInterval(function () {
                                    if (globalCountNow > 0) {
                                        $t.find("span").html(globalCountNow);
                                        globalCountNow--;
                                    } else {
                                        toggleDisable($phone, "ipt_disable", true);
                                        toggleDisable($t, "btn_disable", true);
                                        $t.html("获取验证码");
                                        clearInterval(globalCountDown);
                                        globalCountNow = 59;
                                    }
                                }, 1000);
                            } else {
                                showMsg($t, "error", msg);
                            }
                        },
                        error: function (data) {
                            showMsg($t, "error", "获取验证码失败！");
                        }
                    });
                }
            });

            //输入验证码
            $("#code").on("blur", function () {
                if (!$(this).val()) {
                    showMsg($("#getCode"), "error", "请输入验证码");
                }
            }).on("keyup", function () {
                var can = false;
                var val = $(this).val();
                if (val) {
                    can = true;
                    showMsg($("#getCode"), "hide");
                    if(val.length >= 4){
                        toggleDisable($("#password"), "ipt_disable", can);
                        toggleDisable($("#confirm_password"), "ipt_disable", can);
                    }
                }
            });

            //输入密码
            $("#password").on("focus", function () {
                var $ipt = $(this);
                //密码格式提示
                showMsg($ipt, "info", "密码为8-32位包含至少一个数字和一个英文字母的组合");
            }).on("blur", function () {
                var $ipt = $(this);
                var val = $ipt.val();
                if (!val) {
                    showMsg($ipt, "error", "请输入新密码");
                } else if (!isPassword(val)) {
                    //密码格式验证
                    showMsg($ipt, "error", "密码为8-32位包含至少一个数字和一个英文字母的组合");
                } else {
                    //密码格式正确
                    showMsg($ipt, "success");
                }
            });

            //确认密码
            $("#confirm_password").on("blur", function () {
                var $ipt = $(this);
                var pass = $("#password").val();
                var val = $ipt.val();
                if (!val) {
                    showMsg($ipt, "error", "请输入确认密码");
                } else if (pass !== val) {
                    //密码格式验证
                    showMsg($ipt, "error", "两次输入密码不一致，请重新输入");
                } else {
                    //密码格式正确
                    showMsg($ipt, "success");
                }
            });

            //改变关联对象可操作状态
            function toggleDisable(obj, cls, bool) {
                if (bool) {
                    obj.removeClass(cls).removeProp("disabled");
                } else {
                    obj.addClass(cls).prop("disabled", true);
                }
            }

            //新密码验证
            $("#password_new").on("focus", function () {
                var $ipt = $(this);
                //密码格式提示
                showMsg($ipt, "info", "密码为8-32位包含至少一个数字和一个英文字母的组合");
            }).on("blur", function () {
                var $ipt = $(this);
                var val = $ipt.val();
                if (!val) {
                    showMsg($ipt, "error", "请输入新密码");
                } else if (!isPassword(val)) {
                    //密码格式验证
                    showMsg($ipt, "error", "密码为8-32位包含至少一个数字和一个英文字母的组合");
                } else {
                    //密码格式正确
                    showMsg($ipt, "success");
                }
            });

            //确认新密码
            $("#password_confirm").on("blur", function () {
                var $ipt = $(this);
                var pass = $("#password_new").val();
                var val = $ipt.val();
                if (!val) {
                    showMsg($ipt, "error", "请输入确认密码");
                } else if (pass !== val) {
                    //密码格式验证
                    showMsg($ipt, "error", "两次输入密码不一致，请重新输入");
                } else {
                    //密码格式正确
                    showMsg($ipt, "success");
                }
                canSubmit();
            });

            //按钮可点击状态
            $("#mobile,#code,#password,#confirm_password").on("blur keyup change", function () {
                canSubmit();
            });

            //提交
            $("#submit").click(function () {
                var $t = $(this);
                if($t.attr("class").indexOf("disable") === -1) {
                    var phone = $("#mobile").val();
                    var vcode = $("#code").val();
                    var pwd = $("#password").val();
                    $.ajax({
                        url: "/forget_pwd",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: {
                            phone: phone,
                            vcode: vcode,
                            pwd: pwd
                        },
                        type: "POST",
                        dataType: "json",
                        success: function (data) {
                            var result = data["result"];
                            var msg = data["msg"];
                            if (result === 0) {
                                $(".uc_form").html('<li>' +
                                        '<div class="result">' +
                                        '<span class="icon"></span>' +
                                        '<span class="tit">已成功重置密码</span>' +
                                        '</div>' +
                                        '</li>' +
                                        '<li>' +
                                        '<div class="result">' +
                                        '请牢记新的登录密码，现在就<a href="/login">登录</a>' +
                                        '</div>' +
                                        '</li>' +
                                        '<li>' +
                                        '<div class="result">' +
                                        '<a class="btn" href="/login">确 定</a>' +
                                        '</div>' +
                                        '</li>');
                            } else {
                                showMsg($t, "error", msg);
                                setTimeout(function () {
                                    location.reload();
                                }, 3000);
                            }
                        },
                        error: function (data) {
                            return;
                            showMsg($t, "error", "找回密码失败！");
                            setTimeout(function () {
                                location.reload();
                            }, 3000);
                        }
                    });
                }
            });

            function canSubmit() {
                var arr = ["#mobile", "#code", "#password", "#confirm_password"];
                var canSub = true;
                var $sub = $("#submit");
                for (var i = 0; i < arr.length; i++) {
                    //非空验证
                    if (!$(arr[i]).val()) {
                        canSub = false;
                        $sub.addClass("btn_disable").prop("disabled", true);
                        return false;
                    }
                }

                //有出错信息
                if ($(".tip_error").length > 0) {
                    canSub = false;
                    $sub.addClass("btn_disable").prop("disabled", true);
                    return false;
                }

                $sub.removeClass("btn_disable").removeProp("disabled");
            }

            //提示出错信息
            function showMsg($t, type, msg) {
                if (!msg) {
                    msg = "&nbsp;";
                }
                if ($t.next(".tip").length == 0) {
                    $('<span class="tip tip_' + type + '">' + msg + '</span>').insertAfter($t);
                } else {
                    $t.next(".tip").html(msg).attr("class", "tip tip_" + type);
                }
            }

            //回车键提交
            $(document).on("keydown", function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && e.keyCode == 13) {
                    $("#submit").click();
                }
            });

            //手机号码格式验证
            function isPhone(str) {
                var reg = /^0?(13|14|15|17|18)[0-9]{9}$/;
                return reg.test(str);
            }

            //密码格式验证
            function isPassword(str) {
                var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,32}$/;
                return reg.test(str);
            }
        });
    })(jQuery);
</script>
@endsection
